<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css">
</head>
<body>
<form class="layui-form" action="" >
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input style="width: 300px" type="text" name="userName" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input style="width: 300px" type="text" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男">
            <input type="radio" name="sex" value="女" title="女" checked>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-block">
            <input style="width: 300px" type="text" name="city" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-block">
            <input style="width: 300px" type="text" name="age" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input style="width: 300px" type="text" name="phone" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">职业</label>
        <div class="layui-input-block">
            <input style="width: 300px" type="text" name="occupation" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">收入</label>
        <div class="layui-input-block">
            <input style="width: 300px" type="text" name="income" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">个性签名</label>
        <div class="layui-input-block">
            <textarea name="signature" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        </div>
    </div>

</form>
</body>
<script src="/lib/layui-v2.5.5/layui.js"></script>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;
        var $= layui.$  //Jquery对象

        //监听提交
        form.on('submit(formDemo)', function(data){
            $.ajax({
                type:'POST',
                url: '/user/add',
                datatype:"json",
                contentType:"application/json",
                data: JSON.stringify(data.field),
                success:function (res) {     //成功后的回调函数  res返回的数据
                    console.log(res)
                    if (res.code=='0'){
                        layer.msg("添加成功")
                    }else {
                        layer.msg("添加失败")
                    }
                }
            })
            return false;
        });
    });
</script>
</html>